<template>
  <div class="app-main">
    <navbar @cahngePage="cahngePage"></navbar>
    <div class="main-content">
      <component @visibleWindow="visibleWindow" :is="pageName"></component>
    </div>
  </div>
</template>

<script>
import navbar from "../layout/Navbar.vue";
import waterMap from "@/views/waterMap/index.vue";
import fileManagement from "@/views/fileManagement/index.vue";

export default {
  name: "home",
  components: { navbar, waterMap, fileManagement },
  data() {
    return {
      pageName: "waterMap",
      visibleAssistant: true,
    };
  },
  mounted() {},
  methods: {
    cahngePage(pageName) {
      this.pageName = pageName;
      this.visibleAssistant = pageName == "waterMap";
    },
    visibleWindow(bool) {
      this.visibleAssistant = bool;
    },
  },
};
</script>
<style lang="scss" scoped>
.app-main {
  height: 100%;
  width: 100%;
  .main-content {
    position: relative;
    width: 100%;
    height: calc(100% - 60px);
  }
}
</style>
